import { ref } from 'vue'
import { defineStore } from 'pinia'
import { PRIMARY_COLOR } from '@/common/constants/global'

export const useGlobalStore = defineStore(
  'sv-global',
  () => {
    // 布局模式：vertical 纵向 | classic 经典 | horizontal 横向 | columns 分栏
    const layout = ref('vertical')

    // 主题 light | dark
    const theme = ref('light')

    // element 组件大小：small | default | large
    const assemblySize = ref('small')

    // 主题颜色
    const primaryColor = ref(PRIMARY_COLOR)

    // 全局圆角（单位默认px）
    const borderRadius = ref(6)

    // 侧栏收起宽度（单位默认px）
    const minCollapse = ref(70)

    // 侧栏展开宽度（单位默认px）
    const maxCollapse = ref(220)

    // 主题设置抽屉宽度（单位默认px）
    const themeDrawerWidth = ref(300)

    // 折叠菜单
    const isCollapse = ref(false)

    // 手风琴
    const isAccordion = ref(false)

    // 侧边栏反转色
    const isAsideInverted = ref(false)

    // 头部反转色
    const isHeaderInverted = ref(false)

    // 是否显示页脚
    const isFooter = ref(true)

    // 是否显示标签栏
    const isTabs = ref(true)

    // 是否显示标签栏图标
    const isTabsIcon = ref(true)

    // 当前页面是否全屏
    const isMaximize = ref(false)

    // 是否显示当前页面
    const isShowPage = ref(true)

    // 是否显示面包屑
    const isBreadcrumb = ref(true)

    // 是否显示面包屑图标
    const isBreadcrumbIcon = ref(true)

    return {
      layout,
      theme,
      assemblySize,
      primaryColor,
      borderRadius,
      minCollapse,
      maxCollapse,
      themeDrawerWidth,
      isCollapse,
      isAccordion,
      isAsideInverted,
      isHeaderInverted,
      isFooter,
      isTabs,
      isTabsIcon,
      isMaximize,
      isShowPage,
      isBreadcrumb,
      isBreadcrumbIcon
    }
  },
  {
    persist: true
  }
)
